<style>
  .title {
    font-weight: bolder;
    margin-bottom: 20px;
    border-left: 4px solid #4fb1ec;
    background: #f4f5f6;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" id="app" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form @submit.prevent="save()" accept-charset="UTF-8" class="form m-t" id="reportYearForm" method="post">
          <input name="id" type="hidden" v-model="item.id"/>
          <input name="token" type="hidden" v-model="item.token"/>
          <input name="newFlag" type="hidden" v-model="newFlag"/>
          <div class="clearfix "></div>
          <div class="clearfix col-md-12 title">村级工作推进情况</div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">年报年份：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-dateReportBegin-error" aria-invalid="true" aria-required="true" class="form-control" id="bean-dateReportBegin" maxlength="15" name="dateReportBegin" placeholder="请输入年报年份(起)" required="" type="text" v-model="item.dateReportBegin">
                <span class="help-block m-b-none" for="bean-dateReportBegin" id="bean-dateReportBegin-error"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">村级河长、湖长（包含巡河员、护河员）人数：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-specialVillageSupervise-error" aria-invalid="true" class="form-control" id="bean-specialVillageSupervise" name="specialVillageSupervise" placeholder="请输入村级河长、湖长（包含巡河员、护河员）人数" required="" type="text" v-model="item.specialVillageSupervise">
                <span class="help-block m-b-none" for="bean-specialVillageSupervise" id="bean-specialVillageSupervise-error"></span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">聘用贫困人口担任巡河员、护河员的人数：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-specialPoor-error" aria-invalid="true" class="form-control" id="bean-specialPoor" name="specialPoor" placeholder="请输入聘用贫困人口担任巡河员、护河员的人数" required="" type="text" v-model="item.specialPoor">
                <span class="help-block m-b-none" for="bean-specialPoor" id="bean-specialPoor-error"></span>
              </div>
            </div>
          </div>
          <div class="clearfix col-md-12 title">民间河长与志愿者服务组织</div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">级别：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aLevel-error" aria-invalid="true" class="form-control" id="bean-aLevel" name="aLevel" placeholder="请输入级别" required="" type="text" v-model="item.aLevel">
                <span class="help-block m-b-none" for="bean-aLevel" id="bean-aLevel-error"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">志愿者服务组织数量（个）：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aVolunteersOrg-error" aria-invalid="true" class="form-control" id="bean-aVolunteersOrg" name="aVolunteersOrg" placeholder="请输入志愿者服务组织数量（个）" required="" type="text" v-model="item.aVolunteersOrg">
                <span class="help-block m-b-none" for="bean-aVolunteersOrg" id="bean-aVolunteersOrg-error"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">河湖治理投入级别：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aGovernLevel-error" aria-invalid="true" class="form-control" id="bean-aGovernLevel" name="aGovernLevel" placeholder="请输入河湖治理投入级别" required="" type="text" v-model="item.aGovernLevel">
                <span class="help-block m-b-none" for="bean-aGovernLevel" id="bean-aGovernLevel-error"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">河湖治理社会资本（万元）：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aGovernSocialCapital-error" aria-invalid="true" class="form-control" id="bean-aGovernSocialCapital" name="aGovernSocialCapital" placeholder="请输入河湖治理社会资本（万元）" required="" type="text" v-model="item.aGovernSocialCapital">
                <span class="help-block m-b-none" for="bean-aGovernSocialCapital" id="bean-aGovernSocialCapital-error"></span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">民间河长（人）：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aVoluntaryRiverSupervise-error" aria-invalid="true" class="form-control" id="bean-aVoluntaryRiverSupervise" name="aVoluntaryRiverSupervise" placeholder="请输入民间河长（人）" required="" type="text" v-model="item.aVoluntaryRiverSupervise">
                <span class="help-block m-b-none" for="bean-aVoluntaryRiverSupervise" id="bean-aVoluntaryRiverSupervise-error"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">志愿者服务组织成员（人）：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aVolunteersPerson-error" aria-invalid="true" class="form-control" id="bean-aVolunteersPerson" name="aVolunteersPerson" placeholder="请输入志愿者服务组织成员（人）" required="" type="text" v-model="item.aVolunteersPerson">
                <span class="help-block m-b-none" for="bean-aVolunteersPerson" id="bean-aVolunteersPerson-error"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">河湖治理财政投入（万元：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aGovernFiscal-error" aria-invalid="true" class="form-control" id="bean-aGovernFiscal" name="aGovernFiscal" placeholder="请输入河湖治理财政投入（万元" required="" type="text" v-model="item.aGovernFiscal">
                <span class="help-block m-b-none" for="bean-aGovernFiscal" id="bean-aGovernFiscal-error"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">河湖治理合计（万元）：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-aGovernTotal-error" aria-invalid="true" class="form-control" id="bean-aGovernTotal" name="aGovernTotal" placeholder="请输入河湖治理合计（万元）" required="" type="text" v-model="item.aGovernTotal">
                <span class="help-block m-b-none" for="bean-aGovernTotal" id="bean-aGovernTotal-error"></span>
              </div>
            </div>

          </div>

          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

  export default {
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportYearForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.reportYear.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.reportYear.info)) {
          that.info();
        }
      });

      laydate.render({
        elem: '#bean-dateReportBegin',
        event: 'click',
        type: 'year',
        done: function (val) {
          that.item.dateReportBegin = val;
        }
      });
      laydate.render({
        elem: '#bean-reportingDate',
        event: 'click',
        done: function (val) {
          that.item.reportingDate = val;
        }
      });
    },
    methods: {
      info() {
        let that = this;
        axios.get(site.reportYear.info + sessionStorage.getItem(site.reportYear.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportYearForm').valid()) {
          axios.post(site.reportYear.save, $('#reportYearForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>

